<template>
  <div id="app">

    <VirtualList :items="items" :itemHeight="30" :itemComponent="ItemComponent">

    </VirtualList>
  </div>
</template>

<script setup>
import VirtualList from '../../components/VirtualList.vue';

const items = Array.from({ length: 10000 }, (v, k) => ({
  id: k,
  name: `Item ${k + 1}`,
}));

const ItemComponent = {
  template: '<div class="custom-item"><slot></slot></div>',
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.custom-item {
  line-height: 30px; /* 与 itemHeight 相同 */
  padding: 0 10px;
}
</style>
<!-- ————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/2301_79969095/article/details/144013252 -->
